<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <span class="title">Kano Studio</span>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/microbit">Microbit</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <div class="view">
    <RouterView />
  </div>
</template>

<style scoped>
header {
  width: 100%;
}

.title {
  font-size: 20px;
}

.wrapper {
  width: 100%;
  height: 100px;
}

.view {
  width: 100%;
  height: 100%;
}
</style>
